<template>
  <div>
    <a-form :form="form" style="max-width: 1800px; margin: 40px auto 0; min-height: 800px">

      <a-form-item>
          <k-form-design
            title="设置表达类型"
            :fields="['input', 'date', 'number']"
            :toolbars="['save']"
            hideModel
             @save="handleSave"
            ref="kfd"
          />
      </a-form-item>
      <a-form-item :wrapperCol="{span: 19, offset: 10}">
        <a-button :loading="loading" type="primary" @click="nextStep">提交</a-button>
        <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
@layout-color: 'red'
<script>
export default {
  name: 'Step2',
  data () {
    return {
      // 计数器
      count: 0,
      dataJson: '',
      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
      form: this.$form.createForm(this),
      loading: false,
      timer: 0
    }
  },
  methods: {
    nextStep () {
      if(this.count == 1) {
        this.$emit('nextStep')
        this.count = 0
      } else {
        this.$message.info('请先保存')
      }
    },
     handleSave(values) {
      this.count = 1
      this.$emit('saveJson', values)
      this.$message.success('已保存')
      console.log(values);
    },
    prevStep () {
      this.$emit('prevStep')
    }
  },
  beforeDestroy () {
    clearTimeout(this.timer)
  }
}
</script>

<style lang="less" scoped>
  .stepFormText {
    margin-bottom: 24px;
    .ant-form-item-label,
    .ant-form-item-control {
      line-height: 22px;
    }
  }
</style>